<template>
  <div id="Sort">
    <div class="fliter-item" @click="chooseFilter('number')">
      <div :class="[1, 2].includes(numberCheck) ? 'filte-tit-check' : 'filte-tit'">数量</div>
      <div class="filter-tringle">
        <img :src="numberCheck != 1 ? sortIcons[0] : sortIcons[1]" class="tringle-img1" />
        <img :src="numberCheck != 2 ? sortIcons[2] : sortIcons[3]" class="tringle-img" />
      </div>
    </div>
    <div class="fliter-item" @click="chooseFilter('price')">
      <div :class="[1, 2].includes(priceCheck) ? 'filte-tit-check' : 'filte-tit'">单价</div>
      <div class="filter-tringle">
        <img :src="priceCheck != 1 ? sortIcons[0] : sortIcons[1]" class="tringle-img1" />
        <img :src="priceCheck != 2 ? sortIcons[2] : sortIcons[3]" class="tringle-img" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export default class Sort extends Vue {
  priceCheck: number = 0; // 0都不选，1为升序（第一个为最低），2 为降序（第一个为最高）
  numberCheck: number = 0;
  sortIcons: string[] = [
    require('@/assets/images/up@2x.png'),
    require('@/assets/images/up_check@2x.png'),
    require('@/assets/images/down@2x.png'),
    require('@/assets/images/down_check@2x.png')
  ]

  // 筛选
  chooseFilter (type: string) {
    const sortArr = [1, 2, 0];
    const sortValue = sortArr[(this as any)[`${type}Check`]];
    (this as any)[`${type}Check`] = sortValue
    this.$emit('change', type, sortValue)
  }
}
</script>

<style lang="scss">
#Sort {
  display: flex;
  margin: 10px 24px;
  .fliter-item {
    // width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 40px;
    cursor: pointer;
    user-select: none;
  }
  .filte-tit,
  .filte-tit-check {
    font-size: 13px;
  }
  .filte-tit {
    color: #666;
  }
  .filte-tit-check {
    color: #000;
    font-weight: 800;
  }
  .filter-tringle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 8px;
    .tringle-img,
    .tringle-img1 {
      width: 8px;
    }
    .tringle-img1 {
      margin-bottom: 4px;
    }
  }
}
</style>
